<script type="text/javascript">
  $('#myAffix').affix({
    offset: {
      top: 100
    , bottom: function () {
        return (this.bottom = $('.bs-footer').outerHeight(true))
      }
    }
  })
</script>
  <div class="container margin-top-content">
      <div class="row">
        <div class="col-md-10 col-md-offset-1">
          <div class="col-md-12">
            <div class="row outer-border shadow singlepage">
              
              <div class="col-md-9 padding15">
                <script type="text/javascript">
                  $(document).ready(function() {
                  $('.popup-gallery').magnificPopup({
                    delegate: 'a',
                    type: 'image',
                    tLoading: 'Loading image #%curr%...',
                    mainClass: 'mfp-img-mobile',
                    gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0,1] // Will preload 0 - before current, and 1 after the current image
                    },
                    image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                    titleSrc: function(item) {
                      return item.el.attr('data') + '<small></small>';
                    }
                    }
                  });
                  });
                </script>
                <h4 class="font-biru judul-singlepage">Our Clients</h4>
                <div class="outer-nobg">
                  <!-- mulai animasi -->
      				  <?php
      				  if(isset($list_kategori)){
      					$no=1;
      					foreach($list_kategori as $val){
                  if($no == '1'){
                    echo "<p id='kat_$no'>
                    Kepercayaan adalah amanah bagi kami. Komitmen kami adalah senantiasa menjaga kepercayaan dengan sepenuh hati. Terima kasih atas kepercyaan Anda dalam menggunakan jasa dan layanan kami. </p><br>";
                  }else{
                    echo "<p class='jarak-scroll' id='kat_$no'></p>";
                  }
      				  ?>
                  <h4 class="judul-allclient" id="kat_<?php echo $no;?>"><?php echo $val['nama']?></h4>
                  <div class='demonstrations'>
      					<?php
      					if(isset($list_client[$val['id_kategori']])){
      						foreach($list_client[$val['id_kategori']] as $val_data){
      							if($val_data['gambar']==""){
      					$gambar="default.jpg";
        				}else{
        					$gambar=$val_data['gambar'];
        				}
                $path_gambar2=base_url()."foto_client/".$gambar;
        				$path_gambar=base_url()."foto_client/thumbs/".$gambar;
      					?>
                <div class="popup-gallery">
                  <a href="<?php echo $path_gambar2;?>" data="<?php echo $val_data['konten'];?>">
                    <img src="<?php echo $path_gambar;?>" height="75" width="75" alt='<?php echo $val_data['nama'];?>'>
                    <div class="clearfix"></div>
                    <h4><?php echo $val_data['nama'];?></h4>
                    <div class="clearfix"></div>
                  </a>
                </div>
             <?php
					     }
    					}
    				?>

            <div class="clearfix"></div>  
            </div>
            <div class="clearfix"></div>
            <!-- end animasi -->
				  <?php
				  $no++;
				  }
				  }
				  ?>

                <div class="clearfix"></div>
                </div>
              </div>
              <div class="col-md-3 padding15">
                <div class="outer-nobg bs-sidebar" data-spy="affix" data-offset-top="15" data-offset-bottom="230">
                <?php
                  //include "sidebar.php";
				          $this->load->view('sidebar_kategori');
					        $this->load->view('sidebar_page');
                ?>
              </div>
              </div>
            <div class="clearfix"></div>
            </div>
          </div>
        <div class="clearfix"></div>
        </div>
      </div>
    </div><!-- /.container -->